<template>
    <div :style="`${chartH && `height: ${chartH}px; width:${chartW ? chartW + 'px' : '100%'}`}`" :data-hash="hashName">
      <slot></slot>
    </div>
  </template>
  <script>
  import emitter from '../../utils/emitter'
  import { createHash } from '../../utils/createHash'
  export default {
    name: 'v-chart',
    mixins: [emitter],
    components: {},
    inject: ['root'],
    props: {
      height: {
        type: Number,
        default: 0
      },
      width: {
        type: Number,
        default: 0
      },
      name: {
        type: String,
        default: ''
      },
      tag: {
        typeof: String,
        default: ''
      }
    },
    data() {
      return {
        chartH: 0,
        chartW: 0,
        isFullScreen: false
      }
    },
    watch: {
        root: {
            handler(n, o) {
                this.chartH = n[`${this.hashName}_height`]
                this.chartW = n[`${this.hashName}_width`]
                this.$emit('popChart', {'height': this.chartH, 'width': this.chartW})
            },
            deep: true
        }
    },
    computed: {
      hashName() {
        return 'v-chart' + '_' + createHash(8)
      }
    },
    methods: {
      handleMounted() {
        this.$nextTick(cb => {
          this.dispatch('v-fullscreen', 'handleModule', { name: this.hashName, height: this.height, width: this.width})
          this.chartH = this.root[`${this.hashName}_height`]
          this.chartW = this.root[`${this.hashName}_width`]
          this.$emit('popChart', {'height': this.chartH, 'width': this.chartW})
        })
      }
    },
    created() {
    },
    mounted() {
      this.handleMounted()
    }
  }
  </script>

  